<template>
    <div class="app">
      <!-- {{ this.$store.getters.myHide.states }} -->
       
            <div class="left">
               <div class="img"><img src="../../public/logo.png" alt=""><span class="logo">白泽影视</span></div> 
            </div>
    
            <search></search>
    
           <div class="menu">
           <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router=true>
           <el-menu-item index="1">热门影视推荐</el-menu-item>  
      <el-submenu index="2">
        <template slot="title">影视分类推荐</template>
        <!-- <el-menu-item index="2-1">电视剧</el-menu-item> -->
        <el-menu-item index="2-2">热血</el-menu-item>
        <el-menu-item index="2-3">奇幻</el-menu-item>
      </el-submenu>
    </el-menu>   
           </div>
     
           <div class="right">
         <span @click="hide"><router-link to="/login">登录</router-link>  </span>  
         <span  @click="hide"><router-link to="/enroll">注册</router-link>  </span>  
           </div>
    </div>
    
    
    </template>
    <script>
    import {mapGetters,mapActions} from 'vuex';
    import search from "./search"
     export default {
      components:{
        search
      }
     ,
      data() {
        return {
          
            activeIndex: '1',
            activeIndex: '1',
    
        }
      }
,
      
      methods:{
          handleSelect(key, keyPath) {
            //点击事件
            console.log(key, keyPath);
          },
        
        ...mapActions({
            // hide:"hide"
         }),
         hide(){ 
              // console.log(this.$refs.myNav)
               localStorage.setItem("states",false)
         }
        
        
       
        },
        computed:{
          
        }
    
    }
    
    </script>
    
    <style scoped>
    a{
        text-decoration: none;
        color: black;
    }
    .app{
        width: 100%;
        display: flex;
    
    }
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .img{
                width: 160px;
                height: 50px;
                border-radius: 50%;
             
            }
            .logo{
                color: blue;
                font-size: 25px;
                font-weight: 900;
                font-style: italic;
                font-family:"微软雅黑";
                position: relative;
                top: -16px;
                margin-left: 10px;           
            }
            .left{
                 
                width: 160px;
                height: 50px;
                margin-left: 32px;
            }
          
            .menu{

              
               position: relative;
               left: 250px;
               top: -10px;
    
            }
          .right{
              position:relative;
              left: 396px;
              top: 14px;
             
          }
          .right>span{
              margin-left: 30px;
              color: blue;
              cursor: pointer;
    
          }
       
    </style>
    